<template>
  <div class="header">
    <div class="header-logo">
      <img
        src="@/assets/img/logo.png"
        alt=""
        @click="router.push('/')"
      />
    </div>

    <div v-if="isLogin == 1" class="header-person" @click="toPersonCenter">
      <i class="icon icon-person-center"></i
      >{{ userInfo.userTrueName || userInfo.uname }}
    </div>
    <div v-else class="header-login">
      <div class="login-company" @click="handleLogin('company')">
        <i class="icon icon-company"></i>
        企业登录
      </div>
      <div class="login-person" @click="handleLogin('personal')">
        <i class="icon icon-person"></i>
        个人登录
      </div>
    </div>
  </div>
</template>

<script>
import { ref, watch, computed } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { getUserInfo } from "@/api/index.js";

export default {
  setup() {
    const KEY = "userInfo";
    let userInfo = ref(null);
    const router = useRouter();

    const store = useStore();
    const isLogin = computed(() => store.state.isLogin);
    watch(isLogin, (newVal, oldVal) => {
      console.log("测试",newVal)
      if (newVal == 1) {
        getUser();
      } else if (newVal == 2) {
        localStorage.setItem(KEY, "");
      }
    });

    const getUser = () => {
      console.log(222)
      getUserInfo().then((res) => {
        if (res.code == 200) {
          localStorage.setItem(KEY, JSON.stringify(res.userinfo));
          userInfo.value = res.userinfo;
        }
      });
    };

    const getLocalUserInfo = () => {
      let userInfo = localStorage.getItem(KEY);
      if (userInfo) {
        userInfo = JSON.parse(userInfo);
      } else {
        userInfo = {};
      }
      return userInfo;
    };
    userInfo.value = getLocalUserInfo();
    //如果登录进入个人中心
    const toPersonCenter = () => {
      location.href =
        "/myNew/m_3g.php?mode=index&doaction=index&detail=index&from_url=ex-serviceman";
    };

    const login = () => {
      router.push("/login/index");
    };
    const handleLogin = (type) => {
      let url = "";
      if (type == "personal") {
        if (location.host == "www.gzrc.com.cn") {
          url = "//m.gzrc.com.cn/mobile/login/?from_url=ex-serviceman";
        } else {
          url =
            "/webdev/m.gzrc.gov.cn/index.php?mode=index&doaction=login&from_url=ex-serviceman";
        }
      } else if (type == "company") {
        url = "/companyServe/login.php?from_url=ex-serviceman";
      }
      location.href = url;
    };
    return {
      isLogin,
      login,
      userInfo,
      handleLogin,
      toPersonCenter,
      router,
    };
  },
};
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 48px;
  padding: 0 16px;
  overflow: hidden;

  &-logo {
    width: 180px;
    padding-top: 11px;
    img {
      width: 100%;
    }
  }
  &-login {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
  }

  .login-company,
  .login-person {
    margin-left: 8px;

    .icon {
      width: 13px;
      height: 13px;
      vertical-align: text-top;
    }
  }

  .header-person {
    font-size: 14px;
    .icon {
      margin-top: 1px;
      margin-right: 5px;
      width: 13px;
      height: 13px;
      vertical-align: text-top;
    }
  }
}
</style>